import { Component, TemplateRef, ViewChild } from '@angular/core';
import { SimpleReuseStrategy } from './SimpleReuseStrategy';
import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
import { Title } from '@angular/platform-browser';
import { filter } from 'rxjs/operators';
import { map,mergeMap } from"rxjs/operators";
// import {mergeMap} from 'rxjs/mergeMap'



@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],

  styles  : [
    `
    :host ::ng-deep .trigger {
      font-size: 18px;
      line-height: 64px;
      padding: 0 24px;
      cursor: pointer;
      transition: color .3s;
    }

    :host ::ng-deep .trigger:hover {
      color: #1890ff;
    }

    :host ::ng-deep .logo {
      height: 32px;
      background: rgba(255, 255, 255, .2);
      margin: 16px;
      font-size:20px;
      color:#fff;
      line-height:32px;
      text-align:center;
      overflow:hidden;
    }
    :host ::ng-deep .isSelect{
      padding-left:20px;
      padding-right:20px;
      display:inline-block;
      background:#334454;
    }
    :host ::ng-deep .isSelect a{
      color:#fff
    }
    :host ::ng-deep .unSelect{
      padding-left:20px;
      padding-right:20px;
      display:inline-block;
    }
    :host ::ng-deep .unSelect a{
      color:#334454;
      text-decoration:none !important;
    }
    :host ::ng-deep .unSelect .closeIcon{
      color:#fff;
      position: relative;
      left:10px;
    }
    :host ::ng-deep .isSelect .closeIcon{
      color:#fff;
      position: relative;
      left:10px;
    }
    :host ::ng-deep .msg{
      float:right;
      margin-right:20px;
    }
    :host ::ng-deep .msgFont{
      font-size:20px;
    }
    :host ::ng-deep .ant-avatar {
      cursor: pointer;
    }
  `
]
})
export class AppComponent {
  isCollapsed = false;
  isVisible=false;
  cancelNull=null;
  triggerTemplate = null;
  thisTitle='城市详情';
  thisPanelName='城市管理';
  @ViewChild('trigger') customTrigger: TemplateRef<void>;
  changeTrigger(): void {
    this.triggerTemplate = this.customTrigger;
  }
  title = 'admin';
  //路由列表
  menuList: Array<{ title: string, module: string, power: string,isSelect:boolean }>=[];
  panels = [
    {
      active     : true,
      disabled   : false,
      name       : '城市管理',
      isOpen     : true,
      icon       : 'anticon anticon-profile',
      child      : [{
        link       : '/orderOperation',
        name       : '城市详情',
      }],
      customStyle: {
        'background'   : '#f7f7f7',
        'margin-bottom': '24px',
        'border'       : '0px'
      }
    },
    {
      active     : false,
      disabled   : false,
      isOpen     : false,
      name       : '员工管理',
      icon       : 'anticon anticon-user',
      child      : [{
        link       : '/staffOperation',
        name       : '员工详情',
      }],
      customStyle: {
        'background'   : '#f7f7f7',
        'margin-bottom': '24px',
        'border'       : '0px'
      }
    },
    {
      active     : false,
      disabled   : false,
      isOpen     : false,
      name       : '营收报表',
      icon       : 'anticon anticon-line-chart',
      child      : [{
        link       : '/reportOperation',
        name       : '图形报表',
      },{
        link       : '/tableForm',
        name       : '文字报表',
      }],
      customStyle: {
        'background'   : '#f7f7f7',
        'margin-bottom': '24px',
        'border'       : '0px'
      }
    }
  ];
  constructor(private router: Router,
    private activatedRoute: ActivatedRoute,
    private titleService: Title) {
    this.router.events.pipe(filter(event => event instanceof NavigationEnd))
      .pipe(map(() => this.activatedRoute))
      .pipe(map(route => {
        while (route.firstChild) route = route.firstChild;
        return route;
      }))
      .pipe(filter(route => route.outlet === 'primary'))
      .pipe(mergeMap(route => route.data))
      .subscribe((event) => {
        this.thisPanelName = event['parent'];
        this.thisTitle=event['title'];
        let title = event['title'];
        this.menuList.forEach(p => p.isSelect=false);
        var menu = { title: title, module: event["module"], power: event["power"],parent:event['parent'],isSelect:true};
        this.titleService.setTitle(title);
        let exitMenu=this.menuList.find(info=>info.title==title);
        if(exitMenu){
          this.menuList.forEach(p => p.isSelect=p.title==title);
          return ;
        } 
        this.menuList.push(menu);
      });
  }

  closeUrl(module:string,isSelect:boolean){
    let index=this.menuList.findIndex(p=>p.module==module);
    if(this.menuList.length==1) return ;
    this.menuList=this.menuList.filter(p=>p.module!=module);
    delete SimpleReuseStrategy.handlers[module];
    if(!isSelect) return;
    let menu=this.menuList[index-1];
    if(!menu) {
       menu=this.menuList[index+1];
    }
    this.menuList.forEach(p => p.isSelect=p.module==menu.module );
    this.router.navigate(['/'+menu.module]);
  }
  cancel(){
    this.isVisible=false;
  }
  routers(e,parent){
    this.router.navigate([e.link]);
    this.thisTitle=e.name;
    this.thisPanelName = parent;
    console.log(parent);
  }
  routerModule(e){
    this.router.navigate(['/'+e.module]);
    this.thisTitle=e.title;
    this.thisPanelName = e.parent;
  }
}
